<template>
  <!--            用center-content统一每个导航点开的版面大小-->
  <div class="center-content">
    <!--                /////////////////////////////////////////-->
    <!--                成长轨迹版面-->
    <section class="self-locus">
      <!--                    左边-->
      <div class="locus-left">
        <ul>
          <li>
            <div class="locus-date locus-date-click">2014年5月1日</div>
            <div class="locus-date-spot locus-spot-click"></div>
          </li>
          <li>
            <div class="locus-date">2014年5月1日</div>
            <div class="locus-date-spot"></div>
          </li>
          <li>
            <div class="locus-date">2014年5月1日</div>
            <div class="locus-date-spot"></div>
          </li>
          <li>
            <!--                                时间节点-->
            <div class="locus-date-spot"></div>
          </li>
          <li>
            <div class="locus-date-spot"></div>
          </li>
          <li>
            <div class="locus-date-spot"></div>
          </li>
          <li>
            <div class="locus-date-spot"></div>
          </li>
          <li>
            <div class="locus-date-spot"></div>
          </li>
          <li>
            <div class="locus-date-spot"></div>
          </li>

          <li>
            <div class="update-spot">更新节点</div>
          </li>
        </ul>
      </div>
      <!--                    右边-->
      <div class="locus-right">
        <div class="locus-title">2014年5月1日是个值得纪念的日子。您成为中国共青团的一员。</div>
        <div class="locus-img"></div>
      </div>

    </section>
  </div>
</template>

<script setup>

</script>

<style scoped>
/*成长轨迹版面*/
.self-locus{
  width:100%;
  height:100%;
  display: flex;
}
.locus-left{
  width:20rem;
  height:64rem;
  padding-left: 3rem;
  /*padding-top: 5.5rem;*/
  padding-right: 2rem;
}
.locus-left ul{

  width:100%;
  height:100%;
  padding-top: 5rem;
  border-right: 3px solid rgba(156, 0, 0, 1);

}
.locus-left li{
  padding-left: 1rem;
  list-style: none;
  display: flex;
  position: relative;
  height:2rem;
  cursor: pointer;
}
.locus-left li:not(:first-child) {
  margin-top: 4rem;
}
.locus-date{
  letter-spacing: 2px;
  text-align: center;
  color:rgba(0, 0, 0, 1);
  font-size: 14px;
  margin-top: 0.3rem;
  letter-spacing: 0;
}
.locus-date-click{
  color:rgba(156, 0, 0, 1);
  font-size: 16px;
  font-weight: 700;
}
.locus-date-spot{
  width:2.5rem;
  height:2.5rem;
  border-radius: 50%;
  position: absolute;
  right:-1.4rem;
  background-color: rgba(156, 0, 0, 1);
}
.locus-spot-click{
  width:3rem;
  height:3rem;
  right:-1.6rem;
}

.update-spot{
  width:10rem;
  height:3.5rem;
  color:rgba(156, 0, 0, 1);
  border: 2px solid rgba(156, 0, 0, 1);
  border-radius: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
}
.locus-right{
  width:82rem;
  height:59rem;
  margin: 3rem;
  border-radius: 30px;
  padding:3rem 5rem;
  border-radius:30px;
  border: 1px solid rgba(156, 0, 0, 1);
}
.locus-title{
  text-align: center;
  font-size: 2rem;
  color:rgba(156, 0, 0, 1);
  font-weight:700;
}
.locus-img{
  width:71rem;
  height:43rem;
  margin-top: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
